<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div style="height: 60px; width: 100%">
          <div style="width: 15%; float: left">
            <a-space direction="vertical" style="width: 100%; margin-left: 13px">
              <a-input-group compact>
                <a-cascader
                  v-model:value="value18"
                  style="width: 100%"
                  :options="options"
                  expand-trigger="hover"
                  placeholder="请选择行政区"
                  changeOnSelect
                  @change="onChange"
                />
              </a-input-group>
            </a-space>
          </div>
          <!-- <div style="width: 9%; float: left; margin-top: 15px; margin-left: 20px">
            <a-form-item name="zczt" style="margin-bottom: 0px">
              <a-select v-model:value="zczt" placeholder="请选择自查状态">
                <a-select-option value="">请选择自查状态</a-select-option>
                <a-select-option value="已自查">已自查</a-select-option>
                <a-select-option value="未自查">未自查</a-select-option>
              </a-select>
            </a-form-item>
          </div>
		  <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
            <a-form-item name="zc_yhzt" style="margin-bottom: 0px">
              <a-select v-model:value="zc_yhzt" placeholder="请选择自查隐患状态">
                <a-select-option value="">请选择自查隐患状态</a-select-option>
                <a-select-option value="有隐患">已自查有隐患</a-select-option>
                <a-select-option value="无隐患">已自查无隐患</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div style="width: 9%; float: left; margin-top: 15px; margin-left: 20px">
            <a-form-item name="jczt" style="margin-bottom: 0px">
              <a-select v-model:value="jczt" placeholder="请选择检查状态">
                <a-select-option value="">请选择检查状态</a-select-option>
                <a-select-option value="已检查">已检查</a-select-option>
                <a-select-option value="未检查">未检查</a-select-option>
              </a-select>
            </a-form-item>
          </div>
		  <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
            <a-form-item name="jc_yhzt" style="margin-bottom: 0px">
              <a-select v-model:value="jc_yhzt" placeholder="请选择检查隐患状态">
                <a-select-option value="">请选择检查隐患状态</a-select-option>
                <a-select-option value="有隐患">已检查有隐患</a-select-option>
                <a-select-option value="无隐患">已检查无隐患</a-select-option>
              </a-select>
            </a-form-item>
          </div> -->
          <!-- <div style="width: 8%; float: left; margin-top: 15px; margin-left: 20px">
            <a-form-item name="fwzt" style="margin-bottom: 0px">
              <a-select v-model:value="fwzt" placeholder="请选择出租状态">
                <a-select-option value="正常出租">正常出租</a-select-option>
                <a-select-option value="不出租">不出租</a-select-option>
                <a-select-option value="已拆除">已拆除</a-select-option> 
              </a-select>
            </a-form-item>
          </div> -->
          <div
            style="
              width: 25%;
              float: left;
              margin-left: 20px;
              margin-top: 15px;
              margin-bottom: 15px;
            "
          >
            <a-input-search
              v-model:value="txtKeyWord"
              placeholder="请输入姓名、地址或房屋编号进行查询"
              enter-button
              style="width: 100%"
              @search="searchBtn"
            />
          </div>
           <div
            style="
              width: 25%;
              float: left;
              margin-right: 20px;
              margin-top: 15px;
              margin-bottom: 15px;
            "
          >
             <space style="float: right; margin-right: 10px">
            <a-button type="primary" @click="handleExport"> 导出统计表</a-button>
            </space>
          </div>
          
        </div>
      </div>
      <a-table
        style="margin-top: 0px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      />
      <div class="pagination" style="float: right">
        <div style="float: left; line-height: 32px; padding-right: 12px">共{{ total }}条记录</div>
        <a-pagination
          show-size-changer
          show-total
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          style="float: right"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { houseListApi } from '/@/api/demo/table'; //获取房屋列表
  import { getRegion, delethouseApi } from '/@/api/demo/system'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';
    import { useGlobSetting } from '/@/hooks/setting';
      import { downloadByUrl } from '/@/utils/file/download';
  let userInfo = ref<any>(null);
  let options = ref<any[]>([]);
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(15);
  const value18 = ref<string[]>([]);
  let txtKeyWord = ref<string>('');
  let zczt = ref<string>('');
  let jczt = ref<string>('');
  let zc_yhzt = ref<string>('');
  let jc_yhzt = ref<string>('');
  let fwzt = ref<string>('正常出租');
  let total = ref(0);
  const globSetting = useGlobSetting();
 const userStore = useUserStore();

  // 使用 useRouter 创建一个 router 实例
  const router = useRouter();
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 80,
      },

      {
        title: '区名称',
        dataIndex: 'xzq',
        key: 'xzq',
        align: 'center',
        width: 80,
      },
      {
        title: '街/乡镇名称',
        dataIndex: 'town',
        key: 'town',
        align: 'center',
        width: 100,
      },
      {
        title: '村/社区名称',
        dataIndex: 'village',
        key: 'village',
        align: 'center',
        width: 150,
      },
      {
        title: '用户姓名',
        dataIndex: 'hzxm',
        key: 'hzxm',
        align: 'center',
        width: 100,
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center',
        width: 280,
      },
      {
        title: '房屋编号',
        dataIndex: 'fwbh',
        key: 'fwbh',
        align: 'center',
        width: 180,
        customCell: (row) => {
          return {
            innerHTML: `<span style='color:blue;cursor:pointer;text-decoration:underline' >${row.fwbh}</span>`,
            onClick: async () => {
              getDetailData(row);
            },
          };
        },
      },
      {
        title: '房屋状态',
        dataIndex: 'fwzt',
        key: 'fwzt',
        align: 'center',
        width: 100,
        customCell: (row) => {
          let style = '';
          if (row.fwzt == '正常出租') {
            style = 'color: green;';
          } else if (row.fwzt == '不出租') {
            style = 'color: blue;';
          } else if (row.fwzt == '已拆除') {
            style = 'color: red;';
          }
          return {
            style: style,
            class: 'cell-hover',
          };
        },
      },
      // {
      //   title: '最近一次自查时间',
      //   dataIndex: 'zc_create_on',
      //   key: 'zc_create_on',
      //   align: 'center',
      //   width: 200,
      // },
      // {
      //   title: '最近一次检查时间',
      //   dataIndex: 'jc_create_on',
      //   key: 'jc_create_on',
      //   align: 'center',
      //   width: 200,
      // },
      // {
      //   title: '最近一次乡镇核查时间',
      //   dataIndex: 'jz_create_on',
      //   key: 'jc_create_on',
      //   align: 'center',
      //   width: 250,
      // },
      // {
      //   title: '最近一次区级核查时间',
      //   dataIndex: 'qj_create_on',
      //   key: 'qj_create_on',
      //   align: 'center',
      //   width: 250,
      // },
      // {
      //   title: '最近一次市级核查时间',
      //   dataIndex: 'sj_create_on',
      //   key: 'sj_create_on',
      //   align: 'center',
      //   width: 250,
      // },
      // {
      //   title: '操作',
      //   align: 'center',
      //   width: 80,
      //   customCell: (row) => {
      //     return {
      //       innerHTML: `<span style="color:blue;cursor: pointer;">删除</span>`,
      //       onClick: async () => {
      //         getDeleteData(row);
      //       },
      //     };
      //   },
      // },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  let { tableData, loading } = toRefs(data);
  async function getData() {
    let params: iParams = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      txtKeyWord: txtKeyWord.value,
      fwzt: fwzt.value,
      // zczt: zczt.value,
      // jczt: jczt.value,
      // zc_yhzt: zc_yhzt.value,
      // jc_yhzt: jc_yhzt.value,
    };
    if (value18.value != undefined) {
      params.xzqdm = value18.value[0];
      params.towndm = value18.value[1];
      params.villagedm = value18.value[2];
    }
    loading.value = true;
    let res: any = await houseListApi(params);
    console.log('@res--工作进入汇总表', res.items);

    if (res || res.items.length > 0) {
      loading.value = false;
      data.tableData = [...res.items];
      console.log('@res--工作进入汇总表', tableData);
      total.value = res.total;
    }
  }
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;

     let xzqdm1="";
	let towndm="";
	let villagedmdm="";
	if(value18.value[0]!=undefined)
	{
		xzqdm1=value18.value[0];
	}
	if(value18.value[1]!=undefined)
	{
		towndm=value18.value[1];
	}
	if(value18.value[2]!=undefined)
	{
		villagedmdm=value18.value[2];
	}

    downloadByUrl({
      url:
        uriBase +
        '/houses/search-attr/ExportExcel?access_token=' +
        tk +
       '&xzqdm=' +
		     xzqdm1 +
        '&towndm=' +
        towndm  +
        '&villagedm=' + 
        villagedmdm +
        '&txtKeyWord=' + 
        txtKeyWord.value +
        '&fwzt=' + 
        fwzt.value,
      target: '_blank',
    });
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }

  function searchBtn() {
    data.loading = true;
   // value18.value = [];
    pageIndex.value=1;
    pageSize.value=15;
    getData();
  }

  async function getRegionData() {
    let res: any = await getRegion();
    options.value = res;
  }
  function onChange(value) {
    value18.value = value;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });
  //跳转记录页面
  function getDetailData(row: any) {
    router.push({
      path: '/utils/houseCheckLog',
      query: {
        xzq: row.xzq,
        town: row.town,
        village: row.village,
        hzxm: row.hzxm,
        fwbh: row.fwbh,
      },
    });
  }
  
  async function getDeleteData(row: any) {
    let params = {
      fwbh: row.fwbh,
    };
    loading.value = true;
    let res: any = await delethouseApi(params);

    console.log('@res--删除成功', res);
    getData();
  }
  const onShowSizeChange = () => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    //  pageIndex.value = pageIndex;
    //  pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******工作进展统计初始化******');
    getRegionData();
    getData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .col-sql {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
